<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">
    <title>注册页面</title>
<!--    <link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">-->
<!--    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>-->
<!--    <script src="https://unpkg.com/mint-ui/lib/index.js"></script>-->
<!--    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
<!--    <script src="https://cdn.bootcss.com/qs/6.5.1/qs.min.js"></script>-->
    <link rel="stylesheet" th:href="@{/formlist/common/style.css}">
    <script th:src="@{/formlist/common/vue.js}"></script>
    <script th:src="@{/formlist/common/index.js}"></script>
    <script th:src="@{/formlist/common/axios.min.js}"></script>
    <script th:src="@{/formlist/common/qs.min.js}"></script>
    <link th:href="@{/formlist/css/reset.css}" rel="stylesheet">
    <link th:href="@{/formlist/css/main.css}" rel="stylesheet">
</head>
<body>
<div id="register" class="registered">
<!--    <div class="title">医院工作人员外出统计系统</div>-->
    <div class="username"><mt-field placeholder="请输入身份证号码" v-model="username"></mt-field></div>
<!--    <div class="username" v-on:click="signReasonVisible = true">-->
<!--        <mt-cell title="科室">-->
<!--            <span>{{ message }}</span>-->
<!--        </mt-cell>-->
<!--    </div>-->
    <div class="username"><mt-field placeholder="请输入姓名" v-model="name"></mt-field></div>
    <div class="username"><mt-field placeholder="请输入密码" v-model="password"></mt-field></div>
    <div class="username"><mt-field placeholder="请再次输入密码" v-model="nPassword"></mt-field></div>
    <div class="username"><mt-field placeholder="请输入邀请码" v-model="yaoqingma"></mt-field></div>
    <div class="btn"><mt-button @click.native="handleClick">注册账号</mt-button></div>
    <div class="regist" v-on:click="goBack">返回上一级页面</div>
    <mt-popup v-model="signReasonVisible" position="bottom" style="width:100%;height:43%;" class="popup">
        <mt-picker :slots="slots" @change="onValuesChange" class="picker"></mt-picker>
    </mt-popup>
</div>
<script>

    const qs = Qs;
    const vm = new Vue({
        el: '#register',
        data: {
            message: '请选择>>',
            username: '',
            name: '',
            password: '',
            nPassword: '',
            yaoqingma: '',
            signReasonVisible: false,
            slots: [
                {
                    flex: 1,
                    values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
                    className: 'slot1',
                    textAlign: 'right'
                }, {
                    divider: true,
                    content: '-',
                    className: 'slot2'
                }, {
                    flex: 1,
                    values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
                    className: 'slot3',
                    textAlign: 'left'
                }
            ]
        },
        // created: function () {
        //     this.onValuesChange();
        // },
        methods: {
            onValuesChange:function (picker, values) {
                if (values[0] > values[1]) {
                    picker.setSlotValue(1, values[0]);
                }
            },
            handleClick:function (event) {
                const regex = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
                if (this.username === '') {
                    this.$toast('请填写身份证号码！')
                } else if (!regex.test(this.username)) {
                    this.$toast('请输入正确的身份证号码！')
                } else if (this.name === '') {
                    this.$toast('请填写姓名！')
                } else if (this.password === '') {
                    this.$toast('请填写密码！')
                } else if (this.nPassword === '') {
                    this.$toast('请再次填写密码！')
                } else if(this.password!==this.nPassword) {
                    this.$toast('两次输入的密码不一样，请重新输入！')
                }else if (!this.yaoqingma ) {
                    this.$toast('请填写邀请码！')
                }else {
                    axios.post('/system/renyuan/tbregister', qs.stringify(
                        {
                            'zhanghao':this.username,
                            'mima': this.password,
                            'truename': this.name,
                            'yijikeshi': '',
                            'erjikeshi': '',
                            'yaoqingma':this.yaoqingma
                        })
                    ).then(res => {
                        if (res.data.code === 0) {
                            location.href = '../formlist/login';
                        } else{
                            this.$toast(res.data.msg)
                        }
                    });
                }
            },
            goBack:function (event) {
                window.history.back();
            }
        }

    })
</script>
</body>
</html>